<template>
  <div class="media-card">
    <div class="text" v-if="!component.medias.length">暂无素材内容，可通过下方添加</div>
    <div class="grid" v-else>
      <div class="media" v-for="(media, i) in component.medias" :key="media.uuid">
        <n-icon class="icon" size="20" color="red" @click.stop="removeMeida(i)">
          <CloseCircleFilled></CloseCircleFilled>
        </n-icon>
        <f-media :loading="media.loading" :media_url="media.media_url" :meta_type="media.meta_type"></f-media>
      </div>
    </div>
  </div>
  <div class="tools">
    <!-- <upload :max="max" :directoryDnd="false" class="upload-trigger" :multiple="true" :rules="rules" @finish="finish"
      @before-upload="beforeUpload" :params="uploadParams">
      <n-text class="link-color cursor-pointer">添加图片/视频</n-text>
    </upload> -->
    <n-upload :accept="accept" ref="uploadRef" :max="max" :show-file-list="false" :with-credentials="true"
      :headers="headers" :custom-request="customRequest" :multiple="true">
      <n-text class="link-color cursor-pointer">添加图片/视频</n-text>
    </n-upload>
  </div>

</template>
<script setup lang="ts">
import Upload from './upload.vue';

import { computed, ref } from 'vue';
import { useStore } from '@/store';
import LibMedia from '@/store/modules/adv/component/media/lib';
import { NScrollbar, NButton, NText, NIcon, NUpload, UploadCustomRequestOptions } from 'naive-ui';
import { BasicResponseModel } from '@/api/model/baseModel';
import http from '@/utils/http/axios'
import FMedia from './f-media.vue';
import { CloseCircleFilled, PlayCircleOutlined } from '@vicons/antd';
import { is99Mall, isHQSC, isHZL, isSaaS } from '@/utils/is';
import { TOKEN_LOGIN_KEY, TOKEN_STORE_KEY } from '@/enums/cacheEnum'
import { local_storage } from '@/utils/storage';
import { useUpload } from '../hooks/useUpload';

import MediaComponent from '@/store/modules/adv/component/media/single';

const props = withDefaults(
  defineProps<{
    component: LibMedia
    params: any,
  }>(), {
})
const store = useStore();

const headers = computed(() => {
  const System = is99Mall ? 1 : isHZL ? 2 : isHQSC ? 3 : isSaaS ? 4 : null
  return {
    accessToken: local_storage.get(TOKEN_STORE_KEY) || local_storage.get(TOKEN_LOGIN_KEY),
    'x-system': System,
  }
})


const account = computed(() => {
  const accounts = store.state.adv.accounts;
  return accounts[0];
})

const max = computed(() => {
  return 15 - props.component.medias.length
})
const rules = computed(() => {
  return {
    rect: [800],
    file_format: [],
    duration: [],
    suggest: [],
    size: 512000,
    ratio: [],
    max_number: 1
  }
});

const { validate, createRequestMedia, uploadCover, uploadRef, accept } = useUpload({
  rules: rules
})


const meta = ref('media');

function removeMeida(i: number) {
  props.component.medias.splice(i, 1);
}

function finish(file: any) {
  const { id } = file;
  const i = props.component.medias.findIndex((_: any) => _.id == id);
  props.component.medias[i].update(Object.assign({}, file, {
    loading: false
  }))
  props.component.medias = [].concat([], props.component.medias as any)

}

function beforeUpload(file: any) {
  meta.value = file.meta_type;
  const fileInfo = Object.assign({}, file);
  fileInfo.loading = true;
  const media = new MediaComponent(fileInfo);
  props.component.medias.push(media);
  // props.component.medias = [].concat([], props.component.medias as any);
}


async function customRequest({
  file,
  onFinish
}: UploadCustomRequestOptions) {
  const info = await validate(file, undefined);
  if (!info) return;
  beforeUpload(info);
  const params = { accountCode: account.value ? account.value.accountCode : undefined, }
  onFinish();
  const { data } = await http.uploadFiles({
    url: `/api/adgroup/${info.meta_type}/upload`,
    method: 'post',
    data: params
  }, file.file) as any;
  let media = Object.assign(createRequestMedia(data), info);
  media = await uploadCover(media, params);
  finish(media);
}


</script>
<style lang="scss" scoped>
@import '@/assets/styles/var';

.text {
  color: #939599;
  text-align: center;
  padding-top: 30px;
  font-size: 13px;
}

.media-card {
  background-color: #f7f9fc;
  border-radius: 8px;
  border: 1px solid #e6e8ed;
  min-height: 100px;
  padding: 12px;
}

.grid {
  --cols: 5;
  gap: 15px;
  flex-wrap: wrap;
  white-space: normal;
  display: flex;
  // grid-template-columns: repeat(var(--cols, 6), 1fr);

}

.media {
  width: 128px;
  height: 128px;
  border: 2px solid $primaryColor;
  border-radius: 4px;
  display: flex;
  align-items: center;
  position: relative;

  .icon {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
  }

  .f-media-containter {
    width: 100%;
    // height: auto !important;
  }
}

.tools {
  margin-top: 10px;
}

.upload-trigger {
  width: 100px;

}
</style>
